<script setup lang='ts'>
import { useInsuranceDesign } from "./hooks/InsuranceDesign";
import { PureTableBar } from "@/components/RePureTableBar";
import DesignPrice from "./components/DesignPrice.vue";
const {
  seal,
  columns,
  dataList,
  loading,
  AllPrice,
  sendDate,
  btnloading,
  pagination,
  DialogVisible,
  car_insurance_item,
  ViewDetails,
  close_from,
  stubim_form,
  handleSizeChange,
  handleCurrentChange
} = useInsuranceDesign();

function validatePremium(test) {
  if (test < 0) {
    return 0
  }
  if (!/^d*(?:.d{0,2})?$/.test(test)) {
    return test + '.' + '00'
  }
}
</script>

<template>
  <div class="main">
    <!-- 保险设计 -->
    <PureTableBar title="保险产品列表" class="list_hei">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
          size="small" :data="dataList" max-height="650" :columns="columns" :checkList="checkList"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :pagination="pagination"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' size="small" text @click="ViewDetails(row)" v-if="row.pType == '车险'"
              :disabled="row.getCar ? true : false">
              {{ row.getCar ? '已计算' : '基础保费计算' }}
            </el-button>

            <el-button type='primary' size="small" text @click="ViewDetails(row)" v-if="row.pType != '车险'"
              :disabled="row.getHealth == '2' ? false : true">
              {{ row.getHealth == '3' ? '已发送' : '保费计算' }}
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <!-- 车险窗口 -->

    <ReDialog :width="800" :height="550" :models="DialogVisible" @Closes="close_from()">
      <template #header>
        <h2 style="text-align: center;">基础保费计算</h2>
      </template>
      <template #main>
        <el-tabs type="border-card">
          <el-tab-pane label="基础保费">
            <el-scrollbar height="440px">
              <div class="car_insurance">
                <p class="car_insurance_title">投保信息</p>
                <!-- 车险 -->
                <div class="car_insurance_item" v-if="car_insurance_item.pType === '车险'">
                  <dl class="car_insurance_item_dl">
                    <dd>保单号</dd>
                    <dd :title="car_insurance_item.piNumber">{{ car_insurance_item.piNumber }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>保险产品名称</dd>
                    <dd :title="car_insurance_item.ppName">{{ car_insurance_item.ppName }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>投保人</dd>
                    <dd :title="car_insurance_item.piApplicant">{{ car_insurance_item.piApplicant }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>年龄</dd>
                    <dd :title="car_insurance_item.applicantAge">{{ car_insurance_item.applicantAge }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>性别</dd>
                    <dd :title="car_insurance_item.applicantSex">{{ car_insurance_item.applicantSex }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>车辆类别</dd>
                    <dd :title="car_insurance_item.carType">{{ car_insurance_item.carType }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>车辆用途</dd>
                    <dd :title="car_insurance_item.carUse">{{ car_insurance_item.carUse }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>座位数/吨位数</dd>
                    <dd :title="car_insurance_item.seatTonnage">{{ car_insurance_item.seatTonnage }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>车辆使用年限</dd>
                    <dd :title="car_insurance_item.carUseYear">{{ car_insurance_item.carUseYear }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>新车购置价</dd>
                    <dd :title="car_insurance_item.buyCarPrice">{{ car_insurance_item.buyCarPrice }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>出险次数</dd>
                    <dd :title="car_insurance_item.count">{{ car_insurance_item.count }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>申请时间</dd>
                    <dd :title="car_insurance_item.applyTime">{{ car_insurance_item.applyTime }}</dd>
                  </dl>
                  <!-- 健康险-意外险 -->
                </div>
                <!-- 意外险-健康险 -->
                <div class="car_YWJK" v-else>
                  <h3>xx保险股份有限公司最终健康险/意外险保费核定表</h3>
                  <div class="car_insurance_item">
                    <dl class="car_insurance_item_dl">
                      <dd>保单号</dd>
                      <dd :title="car_insurance_item.piNumber">{{ car_insurance_item.piNumber }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>保险产品名称</dd>
                      <dd :title="car_insurance_item.ppName">{{ car_insurance_item.ppName }}</dd>
                    </dl>
                  </div>
                  <p class="car_YWJK_title">投保人</p>
                  <div class="car_insurance_item">
                    <dl class="car_insurance_item_dl">
                      <dd>姓名</dd>
                      <dd :title="car_insurance_item.piApplicant">{{ car_insurance_item.piApplicant }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>年龄</dd>
                      <dd :title="car_insurance_item.applicantAge">{{ car_insurance_item.applicantAge }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>性别</dd>
                      <dd :title="car_insurance_item.applicantSex">{{ car_insurance_item.applicantSex }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>身份证号码</dd>
                      <dd :title="car_insurance_item.idCard">{{ car_insurance_item.idCard }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>电话号码</dd>
                      <dd :title="car_insurance_item.phone">{{ car_insurance_item.phone }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd></dd>
                      <dd></dd>
                    </dl>
                  </div>
                  <p class="car_YWJK_title">被保险人</p>
                  <div class="car_insurance_item">
                    <dl class="car_insurance_item_dl">
                      <dd>姓名</dd>
                      <dd :title="car_insurance_item.assured">{{ car_insurance_item.assured }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>年龄</dd>
                      <dd :title="car_insurance_item.assuredAge">{{ car_insurance_item.assuredAge }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>性别</dd>
                      <dd :title="car_insurance_item.assuredSex">{{ car_insurance_item.assuredSex }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>身份证号码</dd>
                      <dd :title="car_insurance_item.assuredIDCard">{{ car_insurance_item.assuredIDCard }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>职业</dd>
                      <dd :title="car_insurance_item.assuredJob">{{ car_insurance_item.assuredJob }}</dd>
                    </dl>
                    <dl class="car_insurance_item_dl">
                      <dd>申请时间</dd>
                      <dd :title="car_insurance_item.applyTime">{{ car_insurance_item.applyTime }}</dd>
                    </dl>
                  </div>
                </div>
                <p class="car_insurance_title">投保详情</p>
                <el-table :data="car_insurance_item.child" border style="width: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="projectName" label="保障项目" />
                  <el-table-column prop="ranges" label="保险范围" />
                  <el-table-column prop="price" label="保额选项（元）" />
                  <el-table-column label="基础保费（元）">
                    <template v-slot="{ row }">
                      <!-- <el-input type="number" v-model.number="row.premium" @input="validatePremium(row.premium)" /> -->
                      <el-input-number type="number" v-model.number="row.premium" :precision="2" :min="1" />
                    </template>
                  </el-table-column>
                </el-table>
                <div class="price_bottom">
                  <dl class="price_bottom_des">
                    <dd>保费合计</dd>
                    <dd>{{ AllPrice }}</dd>
                  </dl>
                  <dl class="stubim_msg" v-if="!(car_insurance_item.pType === '车险')">
                    <dd>承保保险公司:
                      <span id="seal">
                        <img v-if="seal" src="@/assets/studen/images/seal01.png" />
                        <span @click="seal = 1" v-else="seal">盖章</span>
                      </span>
                    </dd>
                    <dd>发送时间:
                      <el-date-picker v-model="sendDate" style="width:180px" type="date" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" />
                    </dd>
                  </dl>
                </div>
              </div>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="费率计算">
            <el-scrollbar height="440px">
              <DesignPrice :value="car_insurance_item.pType" />
            </el-scrollbar>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #footer>
        <el-button type="primary" @click="stubim_form()" :loading="btnloading">
          {{ car_insurance_item.pType === '车险' ? '确定' : '发送' }}
        </el-button>
        <el-button @click="close_from()"> 取消 </el-button>
      </template>
    </ReDialog>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

:deep(.el-input-number__increase) {
  display: none;
}

:deep(.el-input-number__decrease) {
  display: none;
}

.car_insurance_title {
  background: #ccc;
  line-height: 32px;
  text-align: left;
  padding-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

.car_insurance_item {
  display: flex;
  flex-wrap: wrap;

  .car_insurance_item_dl {
    width: 50%;
    display: flex;
    align-items: center;
    font-size: 14px;

    dd {
      &:nth-child(1) {
        width: 45%;
        border: 1px solid #ccc;
        font-size: 14px;
        font-weight: bold;
        line-height: 22px;
        height: 23px;
      }

      &:nth-child(2) {
        width: 55%;
        border: 1px solid #ccc;
        text-align: left;
        line-height: 22px;
        height: 23px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 5px;
      }

    }
  }
}

.price_bottom {
  padding-bottom: 10px;

  .price_bottom_des {
    display: flex;
    align-items: center;
    line-height: 32px;

    dd {
      &:nth-child(1) {
        width: 76.6%;
        text-align: right;
        border-right: 1px solid #ebeef5;
        padding-right: 15px;
      }

      &:nth-child(2) {
        text-align: center;
        padding-left: 10px;
        // width: 20%;
      }
    }
  }

  .stubim_msg {
    border-top: 1px solid #ebeef5;

    #seal {
      cursor: pointer;
      color: red;
      position: relative;

      img {
        position: absolute;
        width: 150px;
        max-width: 150px;
        height: 150px;
        right: -25px;
        top: -54px;
        z-index: 10;
      }
    }

    dd {

      line-height: 32px;
      width: 90%;
      text-align: right;
    }
  }

}

.car_YWJK {
  .car_YWJK_title {
    text-align: left;
    line-height: 30px;
    padding-left: 5px;
    font-weight: bold;
  }

  h3 {
    line-height: 38px;
  }
}

:deep(.el-dialog__body) {
  padding: 15px;
}

:deep(.el-input-number .el-input__wrapper) {
  padding-left: 2px;
  padding-right: 2px;
}

// :deep(.el-dialog__footer) {
//   text-align: center;
// }
</style>
